<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8 mwj-border-form">

                <form class="layui-form layui-form-pane" method="post" action="">
                    <div class="layui-form-item" th:if="${not #strings.isEmpty(user.id)}">
                        <label class="layui-form-label">ID</label>
                        <div class="layui-input-inline">
                            <input type="text" name="id" readonly="true"
                                   placeholder="" autocomplete="off" class="layui-input"
                                   th:value="${user.id}">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">部门</label>
                        <div class="layui-input-block">
                            <select name="deptId" lay-verify="required"
                                    xm-select="deptSelect"
                                    xm-select-search>
                                <option>请选择</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">

                        <div class="layui-inline">
                            <label class="layui-form-label">登录账号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="loginName" required lay-verify="required|name|userLoginName"
                                       placeholder="" autocomplete="off" class="layui-input"
                                       th:readonly="${not #strings.isEmpty(user.id)}"
                                       th:value="${user.loginName}">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="nick" required lay-verify="required|name"
                                       placeholder="" autocomplete="off" class="layui-input"
                                       th:value="${user.nick}">
                            </div>
                        </div>

                    </div>

                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-inline" th:with="sexArray=${@userService.getSexes()}">
                            <input type="radio" name="sex"
                                   th:each="sex : ${sexArray}"
                                   th:value="${sex.name()}"
                                   th:title="${sex.getDesc()}"
                                   th:checked="${user.sex.toString() == sex.name()}">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">电话</label>
                        <div class="layui-input-inline">
                            <input type="text" name="phoneNumber" required lay-verify="required|phone"
                                   placeholder="" autocomplete="off" class="layui-input"
                                   th:value="${user.phoneNumber}">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-block">
                            <input type="text" name="email" required lay-verify="required|email"
                                   placeholder="" autocomplete="off" class="layui-input"
                                   th:value="${user.email}">
                        </div>
                    </div>

                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label">角色</label>
                        <div class="layui-input-block" th:with="roleList=${@roleService.getNormalRoleList()}">
                            <input lay-skin="primary" type="checkbox" th:each="role : ${roleList}"
                                   th:name="${'roleIds[]'}"
                                   th:value="${role.id}"
                                   th:title="${role.name}"
                                   th:checked="${#lists.contains(roleIdList, role.id.intValue())}">
                        </div>
                    </div>

                    <!--/* 按钮组容器 */-->
                    <div class="layui-btn-container" style="text-align: center; padding-top: 10px; border: 1px solid #eeeeee;">
                        <button type="submit" lay-submit class="layui-btn layui-btn-normal mwj-btn-width" lay-filter="submit-filter">提交</button>
                        <button type="button" id="cancel" class="layui-btn layui-btn-normal mwj-btn-width">取消</button>
                    </div>

                </form>
            </div>

        </div>
    </div>


    <script type="text/javascript" th:inline="javascript">
        $(function () {
            /* 自定义表单验证 */
            let form = layui.form, formSelects = layui.formSelects;
            form.verify({
                // value：表单的值、item：表单的DOM对象
                name: function(value, item){
                    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                        return '名称不能包含特殊字符';
                    }
                    if(/(^\_)|(\__)|(\_+$)/.test(value)){
                        return '名称首尾不能出现下划线\'_\'';
                    }
                    if(/^\d+\d+\d$/.test(value)){
                        return '名称不能全为数字';
                    }
                    if(value.length > 30){
                        return '名称长度不能大于30';
                    }
                },
                userLoginName: function(value, item){
                    if(!new RegExp("^[a-zA-Z0-9]+$").test(value)){
                        return '登录名只能包含字母和数字';
                    }
                }
                ,loginName: function (value, item) {
                    let message = '';
                    $.ajax({
                        // 改为同步请求
                        async: false,
                        url: '/sys/user/checkLoginName',
                        data: {
                            loginName: value
                        },
                        dataType: 'json',
                        type: 'post',
                        success: function(result) {
                            if (result.code != 0)
                                message = result.msg;
                        }
                    });
                    if (message !== ''){
                        return message;
                    }
                }
            });

            /** 提交按钮 */
            form.on('submit(submit-filter)', function(data){
                //console.log(data.elem); //被执行事件的元素DOM对象，一般为button对象
                //console.log(data.form); //被执行提交的form对象，一般在存在form标签时才会返回
                //console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}

                let roleIds = $("form input:checkbox[name^='roleIds']:checked")
                    .map(function (index, elem) {
                        return $(elem).val();
                    })
                    .get().join(',');
                data.field.roleIds = roleIds;
                let url = data.field.id ? '/sys/user/update' : '/sys/user/insert';
                $.post(url, data.field, function (result) {
                    mwj.msgAndLoadPage(result, '#content', '/sys/user/index');
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

            /** 取消按钮 */
            $("#cancel").on("click", function () {
                mwj.loadPage('#content', '/sys/user/index');
            });

            mwj.addRedStar();
            form.render();

            formSelects
                .config('deptSelect', {
                    type: 'post'                //请求方式: post, get, put, delete...
                    ,searchName: 'name'         //自定义搜索内容的key值
                    ,keyName: 'name'            //自定义返回数据中name的key, 默认 name
                    ,keyVal: 'id'               //自定义返回数据中value的key, 默认 value
                    ,keySel: 'selected'         //自定义返回数据中selected的key, 默认 selected
                    ,keyDis: 'disabled'         //自定义返回数据中disabled的key, 默认 disabled
                })
                .btns('deptSelect', ['select', 'remove', 'reverse', 'skin'])   // 自定义快捷操作按钮
                .data('deptSelect', 'server', {  // 'local' | 'server', 本地数据或者远程数据
                    url: '/sys/dept/querySelectTree?selectedId=' + [[${user.deptId}]]      // 远程数据链接
                })
                .render('deptSelect', {
                    skin: "normal"              //多选皮肤 default | primary | normal | warm | danger
                    ,radio: true                //是否设置为单选模式
                });

        });
    </script>
</body>

</html>